<%@page import="cn.edu.ujn.dao.User"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户管理系统</title>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 引入样式文件和动态控制 -->
<link href="<%=path%>/css/bootstrap.min.css" rel="stylesheet">
<script src="<%=path%>/js/jquery-3.2.1.min.js"></script>
<script src="<%=path%>/js/bootstrap.min.js"></script>

</head>
<body>
	<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#example-navbar-collapse">
					<span class="sr-only">切换导航</span> <span class="icon-bar"></span> <span
						class="icon-bar"></span> <span class="icon-bar"></span>
				</button>

			</div>
			<div class="collapse navbar-collapse" id="example-navbar-collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a class="icon-bar" href="#">顾客管理系统</a></li>

				</ul>
				<ul class="nav navbar-nav navbar-right">
					<li><a>欢迎您,${USER_SESSION.userName}</a></li>
					<li><a href="${pageContext.request.contextPath }/logout">安全退出</a></li>
				</ul>
			</div>
		</div>
	</nav>


	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-2">
				<a href="#" class="list-group-item active"><span
					class="glyphicon glyphicon-home"></span>用户管理管理 </a> <a href="#"
					class="list-group-item"> <!-- 小图标样式设置 --> <span
					class="glyphicon glyphicon-search" aria-hidden="true"> </span>广告位招租
				</a>
			</div>
			<!--左边菜单栏-->
			<div class="col-sm-10">
				<ol class="breadcrumb">
					<li class="active">菜单</li>
					<li class="active">客户信息管理</li>
				</ol>

				<div class="panel panel-default">
					<div class="panel-heading">搜索</div>
					<div class="panel-body">
						<form action="${pageContext.request.contextPath }/user/find"
							method="post" class="form-inline" role="form">
							<div class="form-group">
								<label for="userCode">账号</label> <input type="text"
									class="form-control" id="userCode" placeholder="账号"
									name="userCode" />
							</div>
							<div class="form-group">
								<label for="userName">姓名</label> <input type="text"
									class="form-control" id="userName" placeholder="姓名"
									name="userName" />
							</div>
							<div class="form-group">
								<label for="userAuthority">权限</label> <select
									class="form-control" name="userAuthority">
									<option value="">-- 权限 --</option>
									<option value="0">管理员</option>
									<option value="1">普通用户</option>
								</select>



							</div>
							<label for="gender">性别</label> <select class="form-control"
								name="gender">
								<option value="">-- 性别 --</option>
								<option value="0">男</option>
								<option value="1">女</option>
							</select> <label for="userState">状态</label> <select class="form-control"
								name="userState">
								<option value="">-- 状态 --</option>
								<option value="1">正常</option>
								<option value="0">异常</option>
							</select>
							<button type="submit" class="btn btn-primary">查找</button>
						</form>
					</div>
				</div>

				<div>
					<button type="button" class="btn btn-primary" data-toggle="modal"
						data-target="#createuser2">新建</button>
				</div>
				<div id="createuser2" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-body">
								<button class="close" data-dismiss="modal">
									<span>&times;</span>
								</button>
							</div>
							<div class="modal-title">
								<h1 class="text-center">新建</h1>
							</div>
							<div class="modal-body">
								<form class="form-group" id="new_user_form">



									<div class="form-group">
										<label for="">账号</label> <input class="form-control"
											type="text" placeholder="请输入账号" id="userCode" name="userCode"
											required="required">
									</div>

									<div class="form-group">
										<label for="">密码</label> <input class="form-control"
											type="password" placeholder="至少6位字母或数字" id="userPassword"
											name="userPassword" required="required">
									</div>
									<div class="form-group">
										<label for="">用户名</label> <input class="form-control"
											type="text" placeholder="请输入名称" id="userName" name="userName"
											required="required">
									</div>

									<label for="">权限</label> 管理员<input type="radio"
										name="userAuthority" value="0" required="required" /> 普通用户<input
										type="radio" name="userAuthority" value="1" /> <br> <label
										for="">性别</label> 男<input type="radio" name="gender" value="0"
										required="required" /> 女<input type="radio" name="gender"
										value="1" /><br> <label for="">状态</label> 正常<input
										type="radio" name="userState" value="1" required="required" />
									异常<input type="radio" name="userState" value="0" />
									<div class="text-right">
										<input type="submit" class="btn btn-primary" type="button"
											onclick="createUser2()">
										</button>
										<button class="btn btn-danger" data-dismiss="modal">取消</button>
									</div>



									<a href="" data-toggle="modal" data-dismiss="modal"
										data-target="#login">已有账号？点我登录</a>
								</form>
							</div>
						</div>
					</div>
				</div>

				<!--
                        列表展示
                    -->
				<div class="table-responsive">
					<table class="table table-striped ">
						<thead>
							<tr>
								<th>账号</th>
								<th>名称</th>
								<th>密码</th>
								<th>权限</th>
								<th>性别</th>
								<th>状态</th>
								<th>操作</th>
							</tr>
						</thead>
						<%
						ArrayList<User> list = (ArrayList<User>) request.getAttribute("findUserByType");//此处是取出所存储的数据
						int page_current = 1; //当前页数
						int page_begin = 0; //起始点,注意:下标从0开始
						int page_end = 9; //终点,每页十条信息
						int total_count = 0;
						if (list != null)
							total_count = list.size(); //信息的总量

						int page_total = total_count / 10 + (total_count % 10 != 0 ? 1 : 0);
						if (request.getParameter("begin") != null) {
							page_current = Integer.parseInt(request.getParameter("begin")); //获取当前页数
						}

						page_begin = (page_current - 1) * 10;
						page_end = page_begin + 9 > total_count ? total_count : page_begin + 9;
						request.getSession().setAttribute("page_current", page_current); //保存到session中
						request.getSession().setAttribute("page_total", page_total);
						%>


						<tbody>

							<c:forEach items="${findUserByType}" var="AllUser"
								begin="<%=page_begin %>" end="<%=page_end %>">
								<tr>
									<td>${AllUser.userCode}</td>
									<td>${AllUser.userName}</td>
									<td>${AllUser.userPassword}</td>
									<td>${AllUser.userAuthority=='0'?'管理员':(AllUser.userAuthority=='1'?'普通用户':'')}</td>
									<td>${AllUser.gender=='0'?'男':(AllUser.gender=='1'?'女':'')}</td>
									<td>${AllUser.userState=='1'?'正常':(AllUser.userState=='0'?'异常':'')}</td>
									<td><a href="#" class="btn btn-danger" role="button"
										onclick="deleteUser(${AllUser.userId})">删除</a> <a href="#"
										class="btn btn-primary " data-toggle="modal"
										data-target="#UserUpdateDialog"
										onclick="editUser(${AllUser.userId})">修改</a></td>


								</tr>
							</c:forEach>
						</tbody>
					</table>

				</div>


				<ul class="pagination" style="float: none;">
					<li><a href=>&laquo;</a></li>
					<c:if test="${sessionScope.page_current != 1 }">
						<li><a
							href="${pageContext.request.contextPath }/user/find?begin=${sessionScope.page_current - 1 }&userCode=${userCode}&userName=${userName}&userAuthority=${userAuthority}&gender=${gender}&userState=${userState}">上一页</a></li>
					</c:if>
					<li class="active"><a> ${sessionScope.page_current }</a> <c:if
							test="${sessionScope.page_current != sessionScope.page_total }">
							<li><a
								href="${pageContext.request.contextPath }/user/find?begin=${sessionScope.page_current + 1 }&userCode=${userCode}&userName=${userName}&userAuthority=${userAuthority}&gender=${gender}&userState=${userState}">下一页</a></li>
						</c:if> 当前页数 : ${sessionScope.page_current } / ${sessionScope.page_total }



					
				</ul>
			</div>
		</div>
	</div>
	<!-- 底部页脚部分 -->


	<div id="UserUpdateDialog" class="modal fade" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<button class="close" data-dismiss="modal">
						<span>&times;</span>
					</button>
				</div>
				<div class="modal-title">
					<h3 class="text-center">修改用户信息</h3>
				</div>
				<div class="modal-body">
					<form class="form-group" id="updateUserform">

						<input type="hidden" id="user_Id" name="userId" />


						<div class="form-group">
							<label for="">账号</label> <input class="form-control" type="text"
								placeholder="请输入账号" id="user_Code" name="userCode"
								required="required">
						</div>

						<div class="form-group">
							<label for="">密码</label> <input class="form-control"
								type="password" placeholder="至少6位字母或数字" id="user_Password"
								name="userPassword" required="required">
						</div>
						<div class="form-group">
							<label for="">用户名</label> <input class="form-control" type="text"
								placeholder="请输入名称" id="user_Name" name="userName"
								required="required">
						</div>

						<label for="userauthority">用户权限</label> <select
							class="form-control" name="userAuthority" id="user_Authority">
							<option value="">-- 权限 --</option>
							<option value="0">管理员</option>
							<option value="1">普通用户</option>
						</select> <label for="gender">性别</label> <select class="form-control"
							name="gender" id="usergender">
							<option value="">-- 性别 --</option>
							<option value="0">男</option>
							<option value="1">女</option>
						</select> <label for="userState">状态</label> <select class="form-control"
							name="userState" id="user_State">
							<option value="">-- 状态 --</option>
							<option value="1">正常</option>
							<option value="0">异常</option>
						</select>

						<div class="text-right">
							<input type="submit" class="btn btn-primary" type="button"
								onclick="updateUser()">
							</button>
							<button class="btn btn-danger" data-dismiss="modal">取消</button>
						</div>
						<a href="" data-toggle="modal" data-dismiss="modal"
							data-target="#login">已有账号？点我登录</a>
					</form>
				</div>
			</div>
		</div>
	</div>





	<div class="footer">
		<p class="text-center">2018 &copy; 景原平.</p>
	</div>


	<script type="text/javascript">
                function deleteUser(id) {
                    if(confirm('确实要删除该客户吗?')) {
                $.post("<%=basePath%>user/delete",{"id":id},
                function(data){
                            if(data =="OK"){
                                alert("客户删除成功！");
                                window.location.reload();
                            }else{
                                alert("删除客户失败！");
                                window.location.reload();
                            }
                        });
                    }
                }
                
      
                function createUser2() {
           			$.post("${pageContext.request.contextPath }/user/xinjian", $(
           					"#new_user_form").serialize(), function(data) {
           				//alert($("#newupdateform").serialize())
           				if (data == "OK") {
           					alert("客户创建成功！");
           					window.location.reload();
           				} else {
           					alert("客户创建失败！");
           					window.location.reload();
           				}
           			});
           		}
                
                function editUser(id) {
            	    $.ajax({
            	        type:"get",
            	        url:"<%=basePath%>user/getUserById",
            	        data:{"id":id},
            	        success:function(data) {
            	            $("#user_Id").val(data.userId);
            	            $("#user_Code").val(data.userCode);
            	            $("#user_Password").val(data.userPassword)
            	             $("#user_Authority").val(data.userAuthority)
            	            $("#user_Name").val(data.userName)
            	            $("#usergender").val(data.gender)
            	            $("#user_State").val(data.userState);
            	  
            	            
            	        }
            	    });
            	}
       
                function updateUser() {
            		var fo=$("#updateUserform").serialize();
            		$.param(fo)
            		console.log(fo)
            		$.post("<%=basePath%>user/xiugai",fo,function(data){
            			if(data =="OK"){
            				alert("客户信息更新成功！");
            				window.location.reload();
            			}else{
            				alert("客户信息更新失败！");
            				window.location.reload();
            			}
            		});
            	} 
                
                
                </script>

</body>

</html>